<template>
  <div>
    <el-row class="comment-item" v-for="(item, index) in data" :key="index">
      <el-col class="comment-user" :span="24">
        <el-row type="flex">
          <el-col class="avatar-box" :span="24">
            <img
              src="https://n4-q.mafengwo.net/s11/M00/64/81/wKgBEFsmE0WAPbqnAAAOwSUlOKY63.jpeg?imageMogr2%2Fthumbnail%2F%2196x96r%2Fgravity%2FCenter%2Fcrop%2F%2196x96%2Fquality%2F90"
              width="40"
              alt=""
            />
          </el-col>
          <el-col class="nickname-box" :span="24">
            <p class="nickname">nickname</p>
            <p class="user-level">LV.8</p>
          </el-col>
        </el-row>
        <el-row class="timestamp">2020-10-12</el-row>
      </el-col>
      <el-row class="comment-content">
        <div>
          <div class="pics">{{ item.content }}</div>
        </div>
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ['data'],
  mounted() {
    console.log(this.data);
  }
};
</script>

<style lang="less" scoped>
.comment-item {
  border-top: 1px dashed #eee;
  padding: 20px 0;
  margin-top: 10px;
  .comment-user {
    width: 110px;
    margin-right: 20px;
    .nickname-box {
      .nickname {
        color: #fa3;
      }
      .user-level {
        font-size: 12px;
        color: #f30;
        margin-top: 6px;
      }
    }
    .timestamp {
      color: #666;
      font-size: 14px;
    }
    img {
      display: inline-block;
      border-radius: 50%;
      border: 2px solid #fa3;
    }
  }
  .comment-content {
    overflow: hidden;
    color: #666;
    .pics {
      ul {
        display: flex;
        li {
          padding-right: 16px;
        }
      }
      img {
        width: 100px;
      }
    }
    .reply-box {
      margin-top: 10px;
      /deep/.el-textarea__inner {
        height: 33px;
      }
      .reply-btn {
        margin-top: 10px;
        text-align: right;
      }
    }
  }
}
</style>
